<template>
  <view class="">
    <u-popup :customStyle="{background: 'transparent'}" :safeAreaInsetBottom="false" :show="isShow" mode="center"
             @close="close">
      <view class="wrap">
        <image class="close" mode=""
               src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/gb-icon.png" @click="close"></image>
        <view v-if="obj.score >= 60">
          <image src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/hz-icon.png"></image>
          <view class="dd">{{ obj.scenicName }}</view>
          <!-- <view class="tg-text">
            <view>{{obj.clearMsg}}</view>
            <view>可在成就中心查看</view>
          </view> -->
        </view>
        <view v-else class="content">
          <!-- <view>仅差<text class="c">10</text>分即可通关成功，</view>
          <view>获得通关文牒</view>
          <view>请下次再努力一点</view> -->
          {{ obj.clearMsg }}
        </view>
        <view class="gt-bg">通关得分{{ obj.score }}分</view>
        <image class="xcgw-btn"
               src="https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/xcgw-btn.png"
               @click="toUrl(`/pages/challenge/tripPerception?apperceptionId=${obj.apperceptionId}&proposalId=${obj.proposalId}&itineraryId=${obj.itineraryId}&partyId=${obj.partyId}&delta=2&groupId=${obj.groupId}&returnType=1&deltaNumber=2`)"></image>

      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isShow: false,
    }
  },
  props: {
    obj: {
      typeof: Object,
      default: {}
    }
  },

  methods: {
    toUrl(url) {
      if (!url) return
      uni.navigateTo({
        url
      })
    },
    show() {
      this.isShow = true;
    },
    close() {
      this.isShow = false;
      // uni.navigateBack({
      // 	delta: 1,
      // })
    },
    submit() {
      this.close();
    },
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 640rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 50rpx;
    transform: translateY(-100%);
  }
}

.content {
  font-size: 40rpx;
  font-weight: 700;
  line-height: 75rpx;
  color: rgba(255, 255, 255, 1);
  text-align: center;

  .c {
    font-size: 55rpx;
    color: rgba(255, 235, 59, 1);
  }
}

.bg {
  width: 100%;
}

.btns {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 50rpx;

  .btn {
    width: 300rpx;
    height: 80rpx;
  }
}

.dd {
  font-size: 55rpx;
  font-weight: 400;
  line-height: 66rpx;
  color: rgba(255, 235, 59, 1);
  text-align: center;
  margin-bottom: 20rpx;
}

.tg-text {
  width: 100%;
  font-size: 36rpx;
  font-weight: 500;
  line-height: 52.13rpx;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}

.xcgw-btn {
  width: 380rpx;
  height: 90rpx;
}

.gt-bg {
  width: 542rpx;
  height: 166rpx;
  background: url("https://travel20231111.oss-cn-hangzhou.aliyuncs.com/image/tg-text-bg.png") 0 0 / 100% 100%;
  margin-bottom: 80rpx;
  font-size: 50rpx;
  font-weight: 700;
  line-height: 166rpx;
  color: rgba(255, 255, 255, 1);
  padding-left: 160rpx;
  box-sizing: border-box;
}
</style>
